@import 'nib'
@import 'fonts'

$color-body = rgb(0,0,0)
$color-a = rgb(20,20,150)
$color-a-hover = rgba(0,0,255,0.9)
$color-a-visited = rgba(200,0,0,0.5)
$color-header-bg = rgba(100,100,120,0.9)

$color-header-a = rgba(255,255,255,0.9)
$color-header-a-hover = rgba(255,255,255,1)
$color-header-a-visited = rgba(255,255,255,0.8)
$color-header-detailst-summary = rgba(240,240,240,0.8)

$color-footer-bg = $color-header-bg
$color-footer = $color-header-a


$margin-main = 20px

//lists
inline-list()
	li
		display inline

comma-list()
	inline-list()
	li
		&:after
			content ', '
		&:last-child:after
			content ''

//
body
	margin 0px
	padding 0px
	color $color-body
	clear both
img
	border: none

a
	padding-bottom 0px
	text-decoration none
	color $color-a
	&:hover
		color $color-a-hover
	&:visited
		color $color-a-visited
	img
		border none
		&:hover
			transform scale(2) rotate(10deg)
			//transform 1.4 4deg 0px 0px 0deg 0deg
sharebutton
	transform scale(2) rotate(10deg)

form
	input,textarea
		background-color rgb(220, 220, 220)
		box-shadow inset 0px 0px 2px 2px rgb(160, 170, 180)
		border solid 1px rgb(105,116,127)
		padding 5px
		border-radius 5px
		&:focus,&:hover
			background-color rgb(245, 245, 255)
			box-shadow inset 0px 0px 1px 1px rgb(100, 120, 140)	
			
	input[type=submit],input[type=button]
		border inset 2px buttonhighlight
		border-radius 4px
		box-shadow 0px 0px 1px 1px rgba(0, 0, 0, 0.5)
		cursor pointer
		&:hover
			box-shadow none
					
time
	font-family monospace

pre.prettyprint
	vertical-align top
	display inline-table
	padding 5px
	margin 10px

footer.bottom
	text-align center
	color $color-footer
	box-shadow -2px 5px 8px #000000
	
	
header.top, footer.bottom

	display block
	padding 15px
	background-color $color-header-bg
	hgroup
		h1
			font $font-header-h1
		h2
			font $font-header-h2
	a
		color $color-header-a
		&:hover
			color $color-header-a-hover
		&:visited
			color $color-header-a-visited
	details
		summary
			color $color-header-detailst-summary
			font-style italic
	.search
		float right
		
	nav
		//global-reset() //adjust the menu
		background-color rgba(30,40,50,0.8)
		color rgb(255,255,255)
		vertical-align middle
		padding 20px
		position fixed
		right 0%
		top 10%
		border-top-left-radius 60px
		border-top-right-radius 0px
		border-bottom-right-radius 0px
		border-bottom-left-radius 60px
		box-shadow -2px 5px 8px #000000
		border 2px solid rgb(0,0,0)
		
		a
			color rgb(255,255,255)
			&:hover
				text-decoration underline
		ul
			font-size 11px
			display none
			margin-left 8px
			border-left 1px rgba(255,255,255,0.5) dotted 
			
			&:hover
				border-left 1px rgb(255,255,255) solid
			
			li
				a
					color white	
					&:hover	
						text-decoration underline
			
		&:hover
			padding-left 30px
			color rgb(200,200,200)
			ul
				display block
				
		p.rss
			margin 0px
			padding 0px
			padding-bottom 10px
			margin-bottom 10px
			border-bottom dotted 1px rgba(255,255,255,0.4)

section.search_result
	hgroup
		padding 10px 0px 5px 0px
		h1,h2
			padding 0px
			margin 0px
	article
		background-color rgba(220, 220, 220,0.5)
		box-shadow inset 0px 0px 1px 1px rgba(120, 120, 120, 0.5)
		border solid 1px rgb(105,116,127)
		padding 10px
		border-radius 8px
		p
			margin 0px
			padding 3px

section.main
	margin $margin-main
	font $font-body-text
	
	header
		h1
			font $font-body-h1
		h2
			font $font-body-h2
		h3
			font $font-body-h3
	details
		font $font-body-details
		
	//category

	section.category
		.label
			text-transform none
			font-size: xx-small
			font-style: italic
			font-weight:normal
			color rgba(30,10,10,0.3)
			&:hover
				background-color none
				
		a
			color rgba(30,10,10,0.7)
			&:hover
				text-decoration underline
				color rgb(30,10,10)
				
		header.category
			border-bottom 1px solid rgb(30,10,10)
			padding 5px
			display block
			
			img.category
				border-radius 3px
				position relative
				margin-right 2%
				margin-top -100px
				height 100px
				float right
				vertical-align top
				z-index -1
				
				
		article.content
			h1
				font-size $font-size-body-h1 - 4px
			h2
				font-size $font-size-body-h2 - 3px
			h3
				font-size $font-size-body-h2 - 2px
			details
				font-size $font-size-body-details - 1px
			font-size $font-size-body-text - 2px
			
	//content		
	article.content
		display table
		padding 20px
		margin-bottom 10px
		border-radius 4px
		box-shadow 0 0 1px #999999
		background linear-gradient(top,  rgba(255,255,255,0.1) , rgba(246,246,246,0.8), rgba(237,237,237,1))
		
		header.content
			.contentparent
				font-size 10px
				padding-right 8px
				display table-cell
			.contenttitle
				display table-cell
				
			 details.content
				display table
				width 100%
				p
					display table-cell
					font-size 10px
					padding-right 8px
					vertical-align middle
					
				p.printbutton
					text-align right
					img
						height 15px

		.content-body
			display table
			
			div.description
				margin 15px
				margin-left 20px
				padding 20px
				background-color white
				border rgb(240,240,240) dotted 1px
				display table-cell
				
			aside.content-childs
				display table-cell
				padding-left 15px
				//width 13%
				min-width 100px
				
				ol
					font-size smaller
					padding-left 0px
					margin-left 0px
					list-style lower-alpha
					//list-style-position inside
					li
						margin-left 10px
					
						a
							&:hover
								background rgb(230,230,255) 
				
		section.comments
			h1
				font-size $font-size-body-h1 - 4px
			h2
				font-size $font-size-body-h2 - 3px
			h3
				font-size $font-size-body-h2 - 2px
			details
				font-size $font-size-body-details - 1px
			font-size $font-size-body-text - 2px
			
			padding 10px
			display table
			
			article
				margin-top 20px
				margin-bottom 15px
				margin-right 10px
				margin-left 15px
				
				header
					display inline-table
					vertical-align top
					height 32px
					border none
					padding 0px
					
					h1
						max-width 168px
						display table-cell
						vertical-align top
						margin-top 0px
					
					details
						display table-cell
						vertical-align bottom
						font-size 10px
						margin-bottom 0px
					
					p.trianglecomment
						display table-cell
						content=" "
						width 0
						height 0
						border-left 16px solid transparent
						border-right 32px solid transparent
						border-bottom 32px solid rgba(105,116,127,0.4)
		
				p.contentcomment
					min-width 200px
					display table-cell
					padding 20px
					background rgba(105,116,127,0.4)
					border-radius 20px
					
			form
				display table
				
				p
					display table
					color rgb(100,100,100)
					margin-bottom 10px
					
					label
						color rgb(60,60,60)
						font-size 11px
						display list-item
						list-style none
						
					input,textarea
						display list-item
						list-style none
		
				p.submit
					display table
					margin-right 10px
					
					input
						margin-right 10px
						display table-cell
						padding 8px
	
	//categories
	section.categories
		margin 10px
		
		ul
			margin-left 12px
			border-left 1px dotted rgb(30,10,10)
			
			li
				padding-left 2px
				list-style none
				&:hover
					border-left 1px solid rgb(70,20,20)
					
	//barra de navegación de categorías
	nav.categories
		font-size smaller
		label
			font-style italic
			opacity 0.7
			font-size smaller
			
		ul 
			li 
				display inline
				list-style none
				a
					&:hover
						background-color rgba(255,255,255,0.5)

	
